<template>
   <div>
      <Title title="添加账号"></Title>
   </div>
   <div class="form-box">
      <el-form ref="ruleFormRef" style="max-width: 365px;height: 40px;" :model="addForm" status-icon :rules="rules" label-width="auto"
      class="demo-ruleForm">

      <!-- rules表单验证规则 -->
       <!-- prop model 键名 -->
      <el-form-item label="账号" prop="account"  style="height: 40px;"> 
         <el-input v-model="addForm.account" type="text" autocomplete="off" placeholder="请输入账号" style="height: 40px;" />
      </el-form-item>

      <el-form-item label="密码" prop="password" style="height: 40px;">
         <el-input v-model="addForm.password" type="password" autocomplete="off"   placeholder="请输入密码" style="height: 40px;"/>
      </el-form-item>
      
      <el-form-item label="用户组" prop="userGroup" style="height: 40px;">
      <el-select v-model="addForm.userGroup" placeholder="请选择用户组" style="line-height: 40px;" >
        <el-option label="超级管理员" value="超级管理员"  />
        <el-option label="普通管理员" value="普通管理员" />
      </el-select>
    </el-form-item>

      <el-form-item style="margin-left: 64px;">
         <el-button type="primary" @click="submitForm()" style="height: 40px;line-height: 40px;padding: 12px 20px;">
            立即添加
         </el-button>
         <el-button style="height: 40px;line-height: 40px;padding: 12px 20px;" @click="resetBtn">重置</el-button >
      </el-form-item>
   </el-form>
   </div>
</template>

<script setup>
import Title from '@/views/home/component/Title.vue';
import { reactive, ref } from 'vue'
// import type { FormInstance, FormRules } from 'element-plus'
import {addUser} from '@/api/users.js'
import { ElMessage } from 'element-plus'

const addForm = reactive({
   account:'',
   password:'',
   userGroup:''
})

const ruleFormRef = ref()


//自定义校验规则
const validateAccount = (rule, value, callback) => {
   if (value === '') {
      callback(new Error('请输入账号'))
   }
      callback()
}
const validatePass = (rule, value, callback) => {
   if (value === '') {
      callback(new Error('请输入密码'))
   }else {
      callback()
   }
}

const validateGroup = (rule, value, callback) => {
   if (value === '') {
      callback(new Error('请选择用户组'))
   } else {
      callback()
   }
}

const rules = reactive ({
   account: [{required: true, validator: validateAccount, trigger: 'blur' }],
   password: [{required: true, validator: validatePass, trigger: 'blur' }],
   userGroup: [{required: true, validator: validateGroup, trigger: 'blur' }],
})

//提交校验
const submitForm = () => {
   ruleFormRef.value.validate(async(valid) => {
      if (valid) {
         //通过校验
         //调用添加接口
         const {code,msg} = await addUser(addForm);
         if(code === 0){
            ElMessage.success(msg);
            //重置表单
            resetBtn();
         }else{
            ElMessage.error(msg)
         }
      } else {
         console.log('error submit!')
      }
   })
}
//重置表单
const resetBtn = () => {
   ruleFormRef.value.resetFields();
}
</script>

<style scoped>
.form-box{
   height: 260px;
   padding: 10px 10px 10px 40px;
   /* padding-left:50px; */
}
</style>